import { delete_video, get_video_list } from '@/services/assrssment';
import { filedlist } from '@/services/platformuser';
import paging_fun from '@/utils/paging';
import timeToHms from '@/utils/time';
import { InfoCircleTwoTone, PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components';
import { Button, Divider, message, Modal, Tabs } from 'antd';
import { useEffect, useRef, useState } from 'react';
import AddMyselfVideo from './components/AddMyselfVideo';
import EditMyselfVideo from './components/EditMyselfVideo';

type GithubIssueItem = {
  id: number;
  cate_type: string;
  name: string;
  type_name: string;
  type: string;
  video_size: number;
  video_time: string;
  url: string;
  create_user: string;
};
const Video_manage = () => {
  const actionRef = useRef<ActionType>();
  const actionRef1 = useRef<ActionType>();
  // 视频分类
  const [video_type, setvideotype] = useState();
  // 新增自有视频模态框状态
  const [addVideoModal, setAddVideoModal] = useState(false);
  // 编辑自有视频模态框状态
  const [editVideoModal, setEditVideoModal] = useState(false);
  // 存储当前视频id
  const [videoId, setVideoId] = useState<number>();
  // 视频查看
  const [viewButton, setviewButton] = useState(false);
  // 视频地址
  const [videoplay, setvideoplay] = useState('');
  // 删除视频模态框状态
  const [delModal, setDelModal] = useState(false);
  // 存储删除当前id
  const [delId, setDelId] = useState<number>();

  // 控制新增自有视频模态框的显示与隐藏
  const isShowAddVideoModal = (status: boolean) => {
    setAddVideoModal(status);
  };
  // 控制编辑自有视频模态框的显示与隐藏
  const isShowEditVideoModal = (status: boolean) => {
    setEditVideoModal(status);
  };
  // 控制删除视频模态框的显示与隐藏
  const isShowDelModal = (status: boolean) => {
    setDelModal(status);
  };

  // 页面初始化
  useEffect(() => {
    //获取视频分类
    get_field();
  }, []);

  // 获取自有视频列表
  const get_myself_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      source: 1,
    };
    const res = await get_video_list(request_body);
    console.log('自有视频列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };

  // 获取平台视频列表
  const get_platform_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    //默认分页参数和后端接口字段不匹配
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      source: 0,
    };
    const res = await get_video_list(request_body);
    console.log('平台视频列表', res);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };

  // 获取视频分类
  const get_field = async () => {
    let request_body = {
      type: 'video_type',
    };
    let params = await filedlist(request_body);
    let res: any = {};
    params.data.map((item: any) => {
      res[item.key] = { text: item.value };
    });
    setvideotype(res);
  };

  // 查看视频
  const isShowEdit = (status: boolean, url: string) => {
    setviewButton(status);
    setvideoplay(url);
  };

  //确定删除视频
  const delOk = async () => {
    let request_body = {
      id: delId,
    };
    const res: any = await delete_video(request_body);
    if (res.code === 200) {
      message.success('删除成功');
      actionRef.current?.reload();
      paging_fun(actionRef);
    } else {
      message.success('删除失败');
    }
    isShowDelModal(false);
  };

  // 切换tab
  const changeTab = (key: string) => {
    if (key == '自有视频') {
      actionRef.current?.reload();
    } else if (key == '平台视频') {
      actionRef1.current?.reload();
    }
  };
  // 自有视频列表字段
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
    },
    {
      title: '评估分类',
      dataIndex: 'cate_type',
      align: 'center',
      key: 'cate_type',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '脑卒中',
        },
      },
    },
    {
      title: '视频名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '视频分类',
      dataIndex: 'type_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '视频分类',
      dataIndex: 'type',
      align: 'center',
      valueType: 'select',
      hideInTable: true,
      valueEnum: video_type,
    },
    {
      title: '视频大小',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        let text = '';
        text += record.video_size + 'MB';
        return text;
      },
    },
    {
      title: '视频时长',
      hideInSearch: true,
      key: 'video_time',
      align: 'center',
      dataIndex: 'video_time',
      render: (_, record) => {
        return timeToHms(record.video_time);
      },
    },
    {
      title: '上传人',
      dataIndex: 'platform_user_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '上传时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'action',
      align: 'center',
      valueType: 'option',
      render: (_, record) => (
        <>
          <Button
            key="check"
            type="link"
            onClick={() => {
              isShowEdit(true, record.url);
            }}
          >
            查看
          </Button>
          <Button
            key="Editor"
            type="link"
            onClick={() => {
              setVideoId(record.id);
              isShowEditVideoModal(true);
            }}
          >
            编辑
          </Button>
          <Button
            key="del"
            type="link"
            onClick={() => {
              setDelId(record.id);
              isShowDelModal(true);
            }}
          >
            删除
          </Button>
        </>
      ),
    },
  ];

  // 平台视频列表字段
  const columns2: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      hideInSearch: true,
      valueType: 'index',
      align: 'center',
    },
    {
      title: '评估分类',
      dataIndex: 'cate_type',
      align: 'center',
      key: 'cate_type',
      valueType: 'select',
      valueEnum: {
        1: {
          text: '脑卒中',
        },
      },
    },
    {
      title: '视频名称',
      dataIndex: 'name',
      align: 'center',
    },
    {
      title: '视频分类',
      dataIndex: 'type_name',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '视频分类',
      dataIndex: 'type',
      align: 'center',
      valueType: 'select',
      hideInTable: true,
      valueEnum: video_type,
    },
    {
      title: '视频大小',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => {
        let text = '';
        text += record.video_size + 'MB';
        return text;
      },
    },
    {
      title: '视频时长',
      hideInSearch: true,
      align: 'center',
      key: 'video_time',
      dataIndex: 'video_time',
      render: (_, record) => {
        return timeToHms(record.video_time);
      },
    },
    {
      title: '上传时间',
      dataIndex: 'create_time',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '操作',
      hideInSearch: true,
      key: 'action',
      align: 'center',
      valueType: 'option',
      render: (_, record) => (
        <Button
          key="check"
          type="link"
          onClick={() => {
            isShowEdit(true, record.url);
          }}
        >
          查看
        </Button>
      ),
    },
  ];
  return (
    <PageContainer breadcrumb={false}>
      <Tabs
        defaultActiveKey="自有视频"
        onChange={changeTab}
        items={[
          {
            key: '自有视频',
            label: '自有视频',
            children: (
              <ProTable
                columns={columns}
                actionRef={actionRef}
                request={async (params = {}, sort, filter) => get_myself_list(params)}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 5,
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="自有视频列表"
                toolBarRender={() => [
                  <Button
                    key="button"
                    icon={<PlusOutlined />}
                    type="primary"
                    onClick={() => isShowAddVideoModal(true)}
                  >
                    新增视频
                  </Button>,
                ]}
              />
            ),
          },
          {
            key: '平台视频',
            label: '平台视频',
            children: (
              <ProTable
                columns={columns2}
                actionRef={actionRef1}
                request={async (params = {}, sort, filter) => get_platform_list(params)}
                rowKey={(record) => record.id}
                search={{
                  labelWidth: 'auto',
                  collapseRender: false,
                  collapsed: false,
                  span: 5,
                }}
                pagination={{
                  pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="平台视频列表"
              />
            ),
          },
        ]}
      />
      {/* 新增自有视频模态框 */}
      {addVideoModal ? (
        <AddMyselfVideo
          addVideoModal={addVideoModal}
          isShowAddVideoModal={isShowAddVideoModal}
          actionRef={actionRef}
        ></AddMyselfVideo>
      ) : (
        ''
      )}
      {/* 编辑自有视频模态框 */}
      {editVideoModal ? (
        <EditMyselfVideo
          editVideoModal={editVideoModal}
          isShowEditVideoModal={isShowEditVideoModal}
          videoId={videoId}
          actionRef={actionRef}
        ></EditMyselfVideo>
      ) : (
        ''
      )}
      {/* 查看 */}
      <Modal
        centered
        open={viewButton}
        onCancel={() => setviewButton(false)}
        destroyOnClose={true}
        footer={null}
        closable={true}
        maskClosable={false}
        width={800}
      >
        <div style={{ paddingTop: '18px' }}>
          <video width="100%" height="100%" controls={true}>
            <source src={videoplay} type="video/mp4" />
          </video>
        </div>
      </Modal>
      {/* 删除视频 */}
      <Modal title="删除确认" open={delModal} onOk={delOk} onCancel={() => isShowDelModal(false)}>
        <Divider />
        <p>
          <InfoCircleTwoTone twoToneColor="#ffcc00" /> 视频删除后无法恢复，确定要删除吗？
        </p>
      </Modal>
    </PageContainer>
  );
};
export default Video_manage;
